<template>
  <div>
    <BasicTable @register="registerTable">
      <template #tableTitle>
        <FormItem :style="edgeTypeSelectStyle">
          <span style="margin-right: 10px">边缘类型</span>
          <Select
            style="width: 100px"
            show-search
            v-model:value="edgeTypeSelectValue"
            :options="edgeTypeSelectList"
            @change="getEdgeTypeSelect"
            :show-arrow="true"
          />
        </FormItem>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                icon: 'ant-design:eye-filled',
                tooltip: {
                  title: '详情',
                  placement: 'top',
                },
                onClick: handleMore.bind(null, record),
              },
            ]"
            :drop-down-actions="[
              {
                icon: 'ant-design:property-safety-outlined',
                label: '管理资产',
                onClick: handleProperty.bind(null, record),
              },
              {
                icon: 'material-symbols:devices-outline-sharp',
                label: '管理设备',
                onClick: handleDevices.bind(null, record),
              },
              {
                icon: 'material-symbols:view-comfy',
                label: '实体视图',
                onClick: entityView.bind(null, record),
              },
              {
                icon: 'ri:function-line',
                label: '管理仪表板',
                onClick: handleLine.bind(null, record),
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <PublicDrawer @register="registerDrawer" @updateDescData="handleUpdateDescData" />
  </div>
</template>

<script lang="ts" setup>
  import PublicDrawer from '/@/components/thingsborad/sharedComponents/modules/PublicDrawer/index.vue';
  import { ENTITY_TYPE } from '/@/components/thingsborad/sharedComponents/modules/PublicDrawer/index.data';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { customerEdgeColumns, searchFormSchema, customerDetailSchema } from '../edge.data';
  import { Select, FormItem } from 'ant-design-vue';
  import { edgeTypeSelectList } from '../edge.data';
  import { getTheEdgeData, getCustomerEdge } from '/@/api/thingsborad/edge/edge';
  import { edgeParams } from '/@/api/thingsborad/edge/model/edgeModel';
  import { onMounted, ref } from 'vue';
  import dayjs from 'dayjs';

  import { useDrawer } from '/@/components/Drawer';
  import { useGo } from '/@/hooks/web/usePage';
  import { tableFormStyleSetting, tableStyleSetting } from '/@/settings/thingsBoardDesign';
  import { useUserStore } from '/@/store/modules/user';
  let edgeTypeSelectValue = ref<any>('全部');
  let edgeTypeSelectStyle = ref<any>({
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  });
  let edgeTableDataList = ref<Array<any>>([]);
  let params = ref<edgeParams>({
    pageSize: 10,
    page: 0,
    sortProperty: 'createdTime',
    sortOrder: 'DESC',
    type: '',
  });
  const go = useGo();
  // 表单内容 仓库
  onMounted(() => {
    const userStore = useUserStore();

    // 获取用户登录信息
    const userInfo = userStore.userInfo;

    //初始化 表格数据
    setProps({
      api: getCustomerEdge,
      beforeFetch: (val) => {
        params.value.page = val.page - 1;
        params.value.pageSize = val.pageSize;
        params.value.sortOrder = val.order == 'ascend' ? 'ASC' : 'DESC';
        params.value.sortProperty = 'createdTime';

        if (val.deptName === null) {
          params.value.textSearch = undefined;
        } else {
          params.value.textSearch = val.deptName;
        }
        let data: any = {
          params: params.value,
          id: userInfo?.customerId,
        };
        return data;
      },
      afterFetch: (res) => {
        edgeTableDataList.value = [];
        if (res.length === 0) {
          return edgeTableDataList.value;
        }
        res.forEach((item) => {
          edgeTableDataList.value.push({
            createdTime: dayjs(item.createdTime).format('YYYY-MM-DD HH:mm:ss'),
            name: item.name,
            type: item.type,
            label: item.label,
            customerTitle: item.customerTitle,
            customerIsPublic: item.customerIsPublic,
            id: item.id.id,
          });
        });
        return edgeTableDataList.value;
      },
      fetchSetting: {
        pageField: 'page',
        sizeField: 'pageSize',
        listField: 'data',
        totalField: 'totalElements',
      },
    });
    // 初始化弹窗
  });
  const [registerDrawer, { openDrawer }] = useDrawer();

  //表格初始化
  const [registerTable, { reload, setProps }] = useTable({
    columns: customerEdgeColumns,
    ...tableStyleSetting,

    formConfig: {
      layout: 'horizontal',
      schemas: searchFormSchema,
      showAdvancedButton: false,
      submitFunc: async () => {
        reload();
      },
      ...tableFormStyleSetting,
      actionColOptions: {
        md: { span: 8, offset: 16 },
        lg: { span: 6, offset: 16 },
        xl: { span: 4, offset: 16 },
        xxl: { span: 4, offset: 16 },
      },
    },
  });
  function getEdgeTypeSelect(value) {
    if (value === 'default') {
      params.value.type = value;
    } else {
      params.value.type = undefined;
    }
    reload();
  }

  // 资产
  function handleProperty(record: Recordable) {
    go({
      name: 'Asset',
      params: {
        id: record.id,
        name: record.name,
        key: '边缘实例',
      },
    });
  }
  // 设备
  function handleDevices(record: Recordable) {
    go({
      name: 'Devices',
      params: {
        id: record.id,
        name: record.name,
        key: '边缘实例',
      },
    });
  }
  // 实体视图
  function entityView(record: Recordable) {
    go({
      name: 'Views',
      params: {
        id: record.id,
        name: record.name,
        key: '边缘实例',
      },
    });
  }
  // 仪表盘
  function handleLine(_record: Recordable) {}
  function handleMore(record: Recordable) {
    openDrawer(true, {
      entityType: ENTITY_TYPE.EDGE_INSTANCE,
      entityId: record.id,
      title: record.name,
      api: getTheEdgeData,
      detailSchema: customerDetailSchema,
      params: record.id,
    });
  }

  const handleUpdateDescData = (value) => {
    value.assetName = value.name;
    value.assetConfiguration = value.assetProfileName;
    value.label = value.label;
    value.customer = value.customerTitle;
    value.isOpen = value.customerIsPublic;
  };
</script>
